<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head>
<title></title>
<jsp:include page="inshead.jsp"></jsp:include>
<script type="text/javascript">
	/* jquery入口*/
	$(function() {
		loadgrid(); //加载datagrid
	});
	/* 加载datagrid列表*/
	function loadgrid() {
		$('#grid').datagrid({
			url : mis.path + '/permission!grid.action', //'datagridData.json',
			loadMsg : '正在加载…', //当从远程站点载入数据时，显示的一条快捷信息。
			fit : true, //窗口自适应
			nowrap : false, //设置为true，当数据长度超出列宽时将会自动截取
			fitColumns : true, // 自动适应列宽								
			singleSelect : true, // 每次只选中一行
			sortName : 'permissionId', //默认排序字段
			sortOrder : 'asc', // 升序asc/降序desc
			striped : true, // 隔行变色  
			pagination : true, // 在底部显示分页工具栏
			pageNumber : 1, //初始化页码 
			pageSize : 20, // 指定每页的大小，服务器要加上page属性和total属性
			pageList : [ 20, 30, 50 ], // 可以设置每页记录条数的列表，服务器要加上rows属性
			//rownumbers : true, // 在最前面显示行号 
			idField : 'id', // 主键属性
			// 冻结列,当很多咧出现滚动条时该列不会动
			frozenColumns : [ [ {
				title : '用户等级编号',
				width : '100',
				field : 'permissionId',
				sortable : true
			}, {
				title : '用户等级名称',
				width : '100',
				field : 'permission',
				sortable : true
			} ] ],
			columns : [ [ {
				title : '用户等级描述',
				width : '100',
				field : 'description',
				sortable : false
			} ] ],
			// 工具栏按钮

			toolbar : [ "-", {
				id : 'add',
				text : '添加',
				iconCls : 'icon-add',
				handler : function() {
					add()
				}
			}, //添加按钮
			"-", {
				id : 'edit',
				text : '修改',
				iconCls : 'icon-edit',
				handler : function() {
					edit()
				}
			}, //修改按钮
			"-", {
				id : 'remove',
				text : '删除',
				iconCls : 'icon-remove',
				handler : function() {
					remove()
				}
			}, //删除按钮
			"-", {
				id : 'remove',
				text : '刷新',
				iconCls : 'icon-reload',
				handler : function() {
					reload()
				}
			} //刷新按钮
			]
		});
	}

	/* 添加数据*/
	function add() {
		openDialog('添加权限'); // 显示添加数据dialog窗口
		$("#form").form('clear'); // 清空form的数据
		url = mis.path + '/permission!add.action'; //后台添加数据action
	}

	/* 修改数据*/
	function edit() {
		var row = $('#grid').datagrid('getSelected'); //// 得到选中的一行数据
		//如果没有选中记录
		if (row == null) {
			$.messager.alert("提示", "请选择一条记录", 'info');
			return;
		}
		openDialog('修改权限'); // 显示更新数据dialog窗口
		$("#form").form('load', row); // 加载选择行数据
		url = mis.path + '/permission!edit.action?id=' + row.id; //后台更新数据action
	}

	/* 删除数据*/
	function remove() {
		var row = $('#grid').datagrid('getSelected');
		//如果没有选中记录
		if (row == null) {
			$.messager.alert("提示", "请选择一条记录", 'info');
			return;
		}
		$.messager.confirm('确认', '确定要删除吗？', function(r) {
			if (r) {
				//提交到后台的action
				$.post(mis.path + '/permission!remove.action', {
					id : row.id
				}, function(result) {
					if (result.success) {
						reload();
						$.messager.show({ //显示正确信息
							title : '提示',
							msg : result.msg
						});
					} else {
						$.messager.show({ //显示错误信息
							title : '错误',
							msg : result.msg
						});
					}
				}, 'json');
			}
		});

	}

	/* 保存数据*/
	function save() {
		$('#form').form('submit', {
			url : url, //提交地址
			onSubmit : function() {
				return $(this).form('validate'); //前台字段格式校验
			},
			success : function(result) {
				var result = eval('(' + result + ')');
				if (result.success) {
					closeDialog();// 调用closeDialog;	
					reload();// 重新加载
					$.messager.show({ //显示错误信息
						title : '提示',
						msg : result.msg
					});

				} else {
					$.messager.show({ //显示正确信息
						title : '错误',
						msg : result.msg
					});
				}
			}
		});
	}

	/* 显示Dialog*/
	function openDialog(title) {
		$("#dialog").dialog({
			top:($(document).scrollTop() + ($(document).height()-$("#dialog").height()) )* 0.5,
			left:  ($(document).width()-$("#dialog").width())* 0.5,
			resizable : false,
			modal : true,
			buttons : [ { //设置下方按钮数组
				text : '保存',
				iconCls : 'icon-save',
				handler : function() {
					save();
				}
			}, {
				text : '取消',
				iconCls : 'icon-cancel',
				handler : function() {
					closeDialog();
				}
			} ]
		});
		$("#dialog").dialog('setTitle', title);
		$("#dialog").dialog('open');
	}
	/* 关闭Dialog*/
	function closeDialog() {
		$("#form").form('clear'); // 清空form的数据
		$("#dialog").dialog('close');// 关闭dialog
	}
	/* 刷新grid*/
	function reload() {
		$('#grid').datagrid('reload');
	}
	/* 查询*/
	function doSearch() {
		$('#grid').datagrid('load', {
			typeName : $('#typeName').val()
		});
	}
	/* 重置*/
	function setNull() {
		$("#searchForm").form("clear"); //清空查询字段值
	}
</script>
</head>
<body>
	<div data-options="fit:true, border:false"
		style="width:100%;height:100%;padding:0px;overflow:hidden">
		<table id="grid"></table>
	</div>
	<div id="dialog" class="easyui-dialog" data-options="closed:true"
		title="权限管理" style="width:210px;height:280px;text-align:center">
		<form id="form" method="post">
			<!--<input type="hidden" name="id"/>-->
			<div>
				<label>用户等级编号</label> <input name="permissionId"
					class="easyui-validatebox" data-options="required:true,validType:['length[0,20]']"  />
			</div>
			<div>
				<label>用户等级名称</label> <input name="permission"
					class="easyui-validatebox" data-options="required:true,validType:['length[0,20]']" />
			</div>
			<label>用户等级描述</label> <input name="description"
				data-options="multiline:true,validType:['length[0,150]']" class="easyui-textbox"
				style="height:100px;" />
		</form>
	</div>
</body>
</html>